<template>
    <!--左侧房源筛选-->
    <div class="lefMain">
        <!--左侧1-->
        <span class="leftTop">
            <span style="font-size: 22px;white-space: nowrap;">{{ $t('text.DialogLayout.l246') }}</span>

            <DialogLayout26 @returnData="addSuccess">
                <span class="df">
                    <img class="addImg" src="../../assets/images/add.svg">
                    <div style="font-size: 13px;white-space: nowrap;">{{ $t('text.DialogLayout.l247') }}</div>
                </span>
            </DialogLayout26>

        </span>

        <div style="padding-top: 10px;position: relative;width: 100%;display: flex;">
            <img class="img1" src="../../assets/images/search2.png" />
            <input :placeholder="$t('text.DialogLayout.l248')" class="leftTop2Input" v-model="searchParam">
        </div>

        <!--左侧3-->
        <div v-if="isLoad">
            <div class="leftTop2">
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.DialogLayout.l249')" :selectList="orgTreeList"
                            searchKey="orgIds_LIKE_RIGHT" isShowTitle @returnData="setData" @clearData="clearData" isRange2>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.DialogLayout.l250')" :selectList="getSelectData()"
                            searchKey="status_EQ" @returnData="setData" @clearData="clearData" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="time">
                        {{ $t('text.DialogLayout.l251') }}
                        <el-date-picker v-model="time1" type="daterange" unlink-panels range-separator="-"
                            start-placeholder="Start date" end-placeholder="End date" :size="'small'"
                            style="width: 100px;margin-left: 10px;" value-format="YYYY-MM-DD" />
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="time">
                        {{ $t('text.DialogLayout.l252') }}
                        <el-date-picker v-model="time2" type="daterange" unlink-panels range-separator="-"
                            start-placeholder="Start date" end-placeholder="End date" :size="'small'"
                            style="width: 100px;margin-left: 10px;" value-format="YYYY-MM-DD" />
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--右侧列表-->


    <div class="rightMain">
        <div class="t15">
            <div class="t0">
                <div class="rightTop">
                    <div></div>
                    <div>
                        <TimePageNavList :timeNavList="timeNavList.data" :defaultClick="timeNavList.defaultClick"
                            @returnData="setType">
                        </TimePageNavList>
                    </div>
                    <div class="out">
                        <img class="outImg" src="../../assets/images/out.svg"><span>{{ $t('text.Employee.l7') }}</span>
                    </div>
                </div>

                <div style="overflow: auto;margin: 20px 0px 50px 0;">
                    <div class="t7" v-for="item in reportList" v-bind:key="item" @click="getClickItem(item.id)">
                        <div style="flex: 1;">
                            <div class="t8">{{ item.newHouseName == null ? '-' : item.newHouseName }}</div>
                            <div class="t9">
                                <span class="t10" v-if="item.status == '1'">{{ $t('text.House.l268') }}</span>
                                <span class="t11" v-if="item.status == '2'">{{ $t('text.House.l269') }}</span>
                                <span class="t12" v-if="item.status == '3'">{{ $t('text.House.l270') }}</span>
                                <span class="t13" v-if="item.status == '4'">{{ $t('text.House.l271') }}</span>
                                <span class="t21" v-if="item.status == '5'">{{ $t('text.House.l304') }}</span>
                                <span class="t22" v-if="item.status == '6'">{{ $t('text.House.l305') }}</span>
                                <span class="t14" v-if="item.status == '7'">{{ $t('text.House.l272') }}</span>
                            </div>
                        </div>
                        <div style="flex: 1;">
                            <div class="t8">
                                {{ item.customerName == null ? '-' : item.customerName }}&emsp;TEL·
                                {{ item.customerPhone == null ? '-' : item.customerPhone }}
                            </div>
                            <div class="t9">{{ item.visitTime == null ? '-' : item.visitTime }}&emsp;{{
                                $t('text.House.l266') }}
                            </div>
                        </div>
                        <div style="flex: 1;">
                            <div class="t8">{{ item.reportUserName == null ? '-' : item.reportUserName }}</div>
                            <div class="t9">{{ item.createTime == null ? '-' : item.createTime }}&emsp;{{
                                $t('text.House.l267')
                            }}</div>
                        </div>
                    </div>
                </div>
                <!--底部分页-->
                <div class="setPage">
                    <el-pagination v-model:current-page="searchData.pageNo" v-model:page-size="searchData.pageSize"
                        :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>

            <div class="t16">
                <div class="t17">
                    <div>{{ clickItem.newHouseName == null ? '-' : clickItem.newHouseName }}</div>
                    <img src="../../assets/images/h50.svg" class="copy" @click="copy">
                </div>
                <div class="t9" style="border-bottom: 1px solid #eee;">
                    <span class="t10" v-if="clickItem.status == '1'">{{ $t('text.House.l268') }}</span>
                    <span class="t11" v-if="clickItem.status == '2'">{{ $t('text.House.l269') }}</span>
                    <span class="t12" v-if="clickItem.status == '3'">{{ $t('text.House.l270') }}</span>
                    <span class="t13" v-if="clickItem.status == '4'">{{ $t('text.House.l271') }}</span>
                    <span class="t21" v-if="clickItem.status == '5'">{{ $t('text.House.l304') }}</span>
                    <span class="t22" v-if="clickItem.status == '6'">{{ $t('text.House.l305') }}</span>
                    <span class="t14" v-if="clickItem.status == '7'">{{ $t('text.House.l272') }}</span>
                </div>
                <div style="overflow: auto;">
                    <div class="t17">{{ $t('text.House.l273') }}</div>
                    <div class="t18">{{ $t('text.House.l274') }}&ensp;<span>{{ clickItem.customerName == null ? '-' :
                        clickItem.customerName }}</span></div>
                    <div class="t18">{{ $t('text.House.l275') }}&ensp;<span>{{ clickItem.sex == null ? '-' : clickItem.sex
                    }}</span></div>
                    <div class="t18">{{ $t('text.House.l276') }}&ensp;<span>{{ clickItem.customerPhone == null ? '-' :
                        clickItem.customerPhone }}</span></div>
                    <div class="t18">{{ $t('text.House.l277') }}&ensp;<span>{{ clickItem.visitNum == null ? '-' :
                        clickItem.visitNum }}</span></div>
                    <div class="t18">{{ $t('text.House.l278') }}&ensp;<span>{{ clickItem.visitTime == null ? '-' :
                        clickItem.visitTime }}</span></div>
                    <div class="t17">{{ $t('text.House.l279') }}</div>
                    <div class="t18">{{ $t('text.House.l280') }}&ensp;<span>{{ clickItem.reportUserName == null ? '-' :
                        clickItem.reportUserName }}</span></div>
                    <div class="t18">{{ $t('text.House.l276') }}&ensp;<span>{{ clickItem.reportUserPhone == null ? '-' :
                        clickItem.reportUserPhone }}</span></div>
                    <div class="t18">{{ $t('text.House.l281') }}&ensp;<span>{{ clickItem.createTime == null ? '-' :
                        clickItem.createTime }}</span></div>
                    <div class="t18">{{ $t('text.House.l282') }}&ensp;<span>{{ clickItem.reportOrgName == null ? '-' :
                        clickItem.reportOrgName }}</span></div>
                    <div class="t18">
                        {{ $t('text.House.l283') }}&ensp;
                        <span class="notes">{{ clickItem.notes == null ? '-' :clickItem.notes }}</span>
                    </div>

                    <div class="t17">{{ $t('text.DialogLayout.l253') }}</div>
                    <el-steps :active="active">
                        <el-step :title="item" v-bind:key="item"
                            v-for="(item, index) in [$t('text.House.l306'), $t('text.House.l271'), $t('text.House.l304'), $t('text.House.l305')]">
                            <template v-slot:icon>
                                <img class="setpImg" src="../../assets/images/h49.svg" v-if="index < active" />
                                <img class="setpImg" src="../../assets/images/h48.svg" v-if="index >= active" />
                            </template>
                        </el-step>
                    </el-steps>

                    <div class="t17">{{ $t('text.DialogLayout.l254') }}</div>
                    <div v-for="item in clickItem.reportRecordList" v-bind:key="item">
                        <div class="t23" v-if="item.status == '1'">
                            <div class="t24">
                                <div class="t25">{{ $t('text.DialogLayout.l255') }}</div>
                                <div class="t26">{{ item.createTime == null ? '-' : item.createTime }}</div>
                            </div>
                            <div class="t27">
                                <div class="t25">{{ $t('text.House.l280') }}&ensp;</div>
                                <div class="t26">{{ item.sysUserName == null ? '-' : item.sysUserName }}</div>
                            </div>
                        </div>
                        <div class="t23" v-else>
                            <div class="t24">
                                <div class="t25">
                                    <span v-if="item.status == '1'">{{ $t('text.House.l268') }}</span>
                                    <span v-if="item.status == '2'">{{ $t('text.House.l269') }}</span>
                                    <span v-if="item.status == '3'">{{ $t('text.House.l270') }}</span>
                                    <span v-if="item.status == '4'">{{ $t('text.House.l271') }}</span>
                                    <span v-if="item.status == '5'">{{ $t('text.House.l304') }}</span>
                                    <span v-if="item.status == '6'">{{ $t('text.House.l305') }}</span>
                                    <span v-if="item.status == '7'">{{ $t('text.House.l272') }}</span>
                                </div>
                                <div class="t26">{{ item.createTime == null ? '-' : item.createTime }}</div>
                            </div>
                            <div class="t27">
                                <div class="t25">{{ item.status == '2' || item.status == '3' ? $t('text.DialogLayout.l256')
                                    : $t('text.DialogLayout.l257') }}</div>
                                <div class="t26">{{ item.sysUserName == null ? '-' : item.sysUserName }}</div>
                            </div>
                            <div class="t28">
                                <div class="t29">{{ item.notes == null ? '-' : item.notes }}</div>
                                <div class="t30" v-if="item.picsPath != null">
                                    <CommonImage :src="item.picsPath==null?'':item.picsPath.split(',')[0]" class="t31"/>
                                    <div class="t32" v-if="item.picsPath.split(',').length > 1">
                                        {{ "+" + item.picsPath.split(',').length }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="this.searchData.isManage">
                    <div class="t19"
                        v-if="clickItem.status == '2' || clickItem.status == '4' || clickItem.status == '5' || clickItem.status == '6'">
                        <DialogLayout44 :radio="clickItem.status" :reportId="clickItem.id" @returnData="setStatus">
                            <div class="t20">{{ $t('text.DialogLayout.l258') }}</div>
                        </DialogLayout44>
                    </div>
                    <div class="t33" v-if="clickItem.status == '1'">
                        <DialogLayout43 :status="false" :reportId="clickItem.id" @returnData="setStatus"></DialogLayout43>
                        <DialogLayout43 :status="true" :reportId="clickItem.id" @returnData="setStatus"></DialogLayout43>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>
import TimePageNavList from '@/components/navigation/TimePageNavList.vue';
import { reportFindPage, findListByTypeCode, orgTreeNoUser, reportGetDetailById } from '../../http/api';
import { ElMessage } from 'element-plus'
import RadioSelect from '@/components/select/RadioSelect.vue';
export default {
    name: 'CustomManage',
    components: {
    TimePageNavList,
    RadioSelect
},
    data() {
        return {
            active: 0,
            dictionaryTree: {},
            isLoad: false,
            timeNavList: {
                defaultClick: this.$t('text.House.l265'),
                data: [this.$t('text.House.l265'), this.$t('text.DialogLayout.l259')]
            },
            searchData: {
                pageNo: 1,
                pageSize: 15,
                isManage: false
            },
            time1: '',
            time2: '',
            searchParam: '',
            reportList: [],
            total: 0,
            clickItem: {},
            isReset: false,
            orgTreeList: [],
        }
    },
    mounted() {
        //初始化查询
        this.search()
        //初始化字典数据请求
        findListByTypeCode("reportStatus").then(res => {
            if (res !== undefined) {
                this.dictionaryTree = res
                console.log(res)
                orgTreeNoUser().then(res => {
                    if (res !== undefined) {
                        this.orgTreeList = res
                        this.isLoad = true
                    }
                }).catch()
            }
        }).catch()

    },
    methods: {

        //获取字典数据
        getSelectData() {
            const data = this.dictionaryTree
            if (data != undefined) {
                return this.dictionaryTree
            } else {
                return [{
                    dictName: "全部",
                    dictValue: "-1",
                },]
            }
        },
        setType(index) {
            this.clickItem={}
            switch (index) {
                case 0: this.searchData.isManage = false;break;
                case 1: this.searchData.isManage = true;break;
            }
            this.search()
        },
        getAge(birthDate) {
            birthDate = new Date(birthDate)
            let now = new Date();
            let age = now.getFullYear() - birthDate.getFullYear();
            if (now.getMonth() < birthDate.getMonth() ||
                (now.getMonth() === birthDate.getMonth() && now.getDate() < birthDate.getDate())) {
                age--;
            }
            return age;
        },

        //搜索数据
        search() {
            console.log(JSON.stringify(this.searchData))
            reportFindPage(this.searchData).then(res => {
                if (res !== undefined) {
                    this.reportList = res
                    this.total = res.length
                    console.log(res)
                }
            }).catch()
        },

        //拼接单个子组件返回来的条件值
        setData(obj) {
            this.searchData = { ...this.searchData, ...obj }
        },

        //报备通过或失败，更新状态
        setStatus(data) {
            const index = this.reportList.findIndex(item => item.id === data.reportId);
            if (index !== -1) {
                // 更新匹配项的 status
                this.reportList[index].status = data.status

                let temp = JSON.parse(JSON.stringify(this.clickItem))
                temp.status = data.status
                if (temp.reportRecordList.length > 0) {
                    let tempItem = {
                        createTime: this.formatDateTime(),
                        sysUserName: this.$t("text.Common.l22"),
                        status: data.status,
                        notes: data.notes,
                        reportId: data.reportId,
                        picsPath: data.picsPath
                    }
                    temp.reportRecordList.push(tempItem)
                }
                this.clickItem = temp
            }
        },
        //格式化时间
        formatDateTime() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            var second = date.getSeconds();
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        },

        addSuccess() {
            this.search()
        },

        //子组件选择了不限，进行删除指定字段
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
            console.log(JSON.stringify(this.searchData))
        },
        //点击详情
        getClickItem(id) {
            reportGetDetailById({ id: id }).then(res => {
                if (res !== undefined) {
                    this.clickItem = res
                    if (res.status == '2') {
                        this.active = 1
                    } else if (res.status == '4') {
                        this.active = 2
                    } else if (res.status == '5') {
                        this.active = 3
                    } else if (res.status == '6') {
                        this.active = 4
                    } else {
                        this.active = 0
                    }
                    console.log(res)
                }
            }).catch()
        },
        copy() {
            const textarea = document.createElement('textarea');
            let temp = {
                [this.$t('text.House.l303')]: this.clickItem.newHouseName,
                [this.$t('text.House.l273')]: [
                    { [this.$t('text.House.l274')]: this.clickItem.customerName },
                    { [this.$t('text.House.l275')]: this.clickItem.sex },
                    { [this.$t('text.House.l276')]: this.clickItem.customerPhone },
                    { [this.$t('text.House.l277')]: this.clickItem.visitNum },
                    { [this.$t('text.House.l278')]: this.clickItem.visitTime },
                ],
                [this.$t('text.House.l279')]: [
                    { [this.$t('text.House.l280')]: this.clickItem.reportUserName },
                    { [this.$t('text.House.l276')]: this.clickItem.reportUserPhone },
                    { [this.$t('text.House.l281')]: this.clickItem.createTime },
                    { [this.$t('text.House.l282')]: this.clickItem.reportOrgName },
                    { [this.$t('text.House.l283')]: this.clickItem.notes },
                ],
            }
            textarea.value = this.formatObjectToText(temp);
            document.body.appendChild(textarea);
            // 选择并复制文本
            textarea.select();
            document.execCommand('copy');
            // 移除临时textarea元素
            document.body.removeChild(textarea);
            ElMessage.success({
                showClose: true,
                message: this.$t("text.Common.l21"),
                type: 'success',
            })
        },
        //文本格式化
        formatObjectToText(obj, level = 0) {
            const indent = '  '.repeat(level);
            let result = '';
            for (const key in obj) {
                const value = obj[key];
                if (typeof value === 'object') {
                    if (Array.isArray(value)) {
                        // 处理数组的情况
                        result += `${indent}${key} [\n`;
                        for (const item of value) {
                            if (typeof item === 'object') {
                                // 如果数组元素是对象，则进一步处理
                                result += `${this.formatObjectToText(item, level + 2)}`;
                            } else {
                                // 否则直接输出
                                result += `${indent}  ${item},\n`;
                            }
                        }
                        result += `${indent}],\n`;
                    } else {
                        // 处理嵌套对象的情况
                        result += `${indent}${key} [\n${this.formatObjectToText(value, level + 1)}${indent}],\n`;
                    }
                } else {
                    // 处理基本值
                    result += `${indent}${key} ${value},\n`;
                }
            }
            return result;
        },
        //重置
        reset() {
            this.searchData = {
                pageNo: 1,
                pageSize: 10
            }
            this.isReset = !this.isReset
        },
        handleSizeChange(val) {
            this.searchData.pageSize = val
            this.search()
        },
        handleCurrentChange(val) {
            this.searchData.pageNo = val
            this.search()
        },
    },
    watch: {
        searchData: {
            handler() {
                this.search()
            }
        },
        time1() {
            if (this.time1 == null) {
                this.clearData({ createTime_BEGIN: '', createTime_END: '' })
            } else {
                let obj = { createTime_BEGIN: this.time1[0], createTime_END: this.time1[1] }
                this.searchData = { ...this.searchData, ...obj }
            }
        },
        time2() {
            if (this.time2 == null) {
                this.clearData({ visitTime_BEGIN: '', visitTime_END: '' })
            } else {
                let obj = { visitTime_BEGIN: this.time2[0], visitTime_END: this.time2[1] }
                this.searchData = { ...this.searchData, ...obj }
            }
        },

        searchParam() {
            if (this.searchParam == '') {
                this.clearData({ searchParam: '' })
            } else {
                let obj = { searchParam: this.searchParam }
                this.setData(obj)
            }
        }
    },
    computed: {

    }

}
</script>
    
<style scoped>
.copy {
    width: 25px;
    height: 25px;
}

.notes {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

::v-deep(.el-step__title.is-process) {
    font-weight: 500;
    color: #a8abb2;
}

::v-deep(.el-step__title) {
    font-size: 12px;
    line-height: 30px;
}

.setpImg {
    width: 17px;
    height: 17px;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.lefMain {
    min-width: 310px;
    padding: 10px;
    border-right: solid 1px var(--el-menu-border-color);
    overflow: auto;
}

.leftTop {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.addImg {
    width: 15px;
    height: 15px;
    padding-right: 3px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.items {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
}


.rightMain {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 5px 10px;
}


.rightTop {
    display: flex;
    padding-top: 10px;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
}

.setPage {
    margin: 10px 10px 15px 0px;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 10px;
}

.out {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.outImg {
    width: 20px;
    height: 20px;
    padding-right: 5px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.time {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: space-between;
}

.leftTop {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.img1 {
    position: absolute;
    left: 13px;
    width: 15px;
    height: 15px;
    top: 17px;
    z-index: 1;
}

.leftTop2Input {
    outline: none;
    width: inherit;
    height: 25px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 30px;
    padding-right: 15px;
    background-color: rgb(242, 242, 242);
    border-radius: 5px;
    font-size: 12px;
    position: relative;
}

.leftTop2Input:focus {
    border: 1px solid #6698ff;
}

.t0 {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    padding-bottom: 5px;
    flex: 3;
}

.p1 {
    width: 100%;
    display: flex;
    overflow: hidden;
    height: 100%;
}

.t2 {
    font-size: 14px;
    color: black;
    text-align: left;
}

.t3 {
    font-size: 13px;
    color: gray;
    text-align: left;
    padding-left: 35px;
}

.t4 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
}

.t5 {
    flex: 1;
    font-size: 13px;
    color: gray;
    padding-top: 20px;
    padding-bottom: 20px;
}

.t6 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 15px;
}

.t7 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-left: 35px;
    border-bottom: 1px solid #ddd;
}

.t8 {
    font-size: 13px;
    color: black;
    text-align: left;
}

.t9 {
    font-size: 12px;
    color: gray;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 15px;
}

.t10 {
    background-color: #f59b22;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t11 {
    background-color: #02bfbf;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t12 {
    background-color: #ec808d;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t13 {
    background-color: #c081ff;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t14 {
    background-color: #aaaaaa;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t15 {
    display: flex;
    flex: 1;
    height: 100%;
    padding-left: 35px;
    padding-bottom: 5px;
}

.t16 {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    flex: 1;
    text-align: left;
    border-left: 1px solid #eee;
    gap: 15px;
    padding-top: 35px;
}

.t17 {
    color: black;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.t18 {
    color: #555;
    font-size: 13px;
    padding-left: 15px;
    display: flex;
    white-space: nowrap;
    margin-bottom: 10px;
    word-break: break-all;
}

span {
    white-space: normal;
}

.t19 {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #c6c3c3;
    gap: 20px;
}

.t20 {
    background: #6698ff;
    margin: 15px 0 15px 30px;
    color: white;
    border-radius: 6px;
    padding: 7px 5px;
    text-align: center;
    font-size: 13px;
    width: 160px;
}

.t21 {
    background-color: #8080ff;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t22 {
    background-color: #429df8;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t23 {
    background: #f2f2f2;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    padding: 10px 0;
}

.t24 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 10px;
}

.t25 {
    color: black;
}

.t26 {
    color: gray;
    display: flex;
}

.t27 {
    display: flex;
    padding: 0 10px;
}

.t28 {
    display: flex;
}

.t29 {
    color: black;
    padding: 0 10px;
    flex: 1;
    word-break: break-all;
}

.t30 {
    position: relative;
    padding-right: 10px;
}

.t31 {
    width: 90px;
    height: 70px;
}

.t32 {
    position: absolute;
    top: 30px;
    left: 35px;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.t33 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #c6c3c3;
}
</style>